<!--  -->
<template>
  <div>
    <div ref="projectMap" style="width: 1000px; height: 500px"></div>
    <div id="main"></div>
  </div>
</template>

<script>
import $ from "jquery";
// import szmap from "echarts/map/szmap.svg";
import cqmap from "@/assets/map.json";
import mapbg from "@/assets/map-bg.png";
export default {
  props: {},
  components: {},
  data() {
    return {
      resData: {},
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.echartsInit();
      // this.getmap();
    });
  },
  methods: {
    echartsInit() {
      // 使用ref代替document.getElementById
      const echartsDom = this.$refs.projectMap;
      if (echartsDom) {
        const myChart = window.echarts.init(echartsDom);
        // 此处的cqmap是通过上面地址下载好的重庆市地图的json数据
        window.echarts.registerMap("CQ", cqmap);
        var svg = `<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg height="209.973mm" baseProfile="tiny" xmlns:cc="http://creativecommons.org/ns#" viewBox="0 0 3507 2480" width="296.926mm" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <path name="哈哈" style="fill: #082141; fill-opacity: 0.9; stroke: transparent;" d="M726.185,1048.18 L2493.04,328.351 L2591.2,1898.89 L1020.66,2226.08 L726.185,1048.18"/>
</svg>
`;
        // window.echarts.registerMap("iceland_svg", { svg: svg });
        const options = {
          // title是标题，根据需求是否需要，不需要直接false，需要的话自己看api配置项；
          title: {
            show: false,
          },
          // 鼠标移入展示的提示框，同样参考api配置项，{a}{b}等都有各自的意义
          tooltip: {
            trigger: "item",
            formatter: "{b}<br/>工程项目：{c}",
          },
          // 工具栏   设置为false不展示，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具，暂不需要
          toolbox: {
            show: false,
            orient: "vertical",
            left: "right",
            top: "center",
            // 自定义方法
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {},
            },
          },
          visualMap: {
            show: false, // 虽然不展示视觉映射组件，但是下面的某些配置是生效的
            // min: 100,
            // max: 700,
            // text: ["High", "Low"],
            realtime: false,
            // calculable: true,
            inRange: {
              // color: ["rgb(0,137,121)"],
            },
          },
          geo: {
            map: "CQ",
            type: "map",
            // layoutCenter: ["50%", "50%"],
            // layoutSize: "150%",
            // zoom: 0.65,
            roam: false,
            // 样式一
            // itemStyle: {
            //   normal: {
            //     areaColor: 'rgba(13, 110, 191, 1)',
            //     shadowColor: 'rgba(13, 110, 191, 0.5)',
            //     shadowOffsetX: 6,
            //     shadowOffsetY: 12
            //   }
            // }
            // 样式二
            itemStyle: {
              normal: {
                borderColor: "#AEF3FF",
                borderWidth: 2,
                areaColor: {
                  image: mapbg, //
                  repeat: "repeat", // // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                },
                shadowColor: "rgba(13, 110, 191, 0.5)",
                // shadowOffsetX: 6,
                // shadowOffsetY: 12,
              },
            },
          },
          color: ["#fff"], // 展示的字体颜色
          series: [
            {
              // tooltip展示的标题，设置formatter后直接通过{b}展示区域name，此值的代号为{a}。
              name: "展示的名称",
              type: "map",
              mapType: "CQ", // 自定义扩展图表类型，必须和registerMap的第一个参数相同
              // roam: true, //可以拖拽和缩放
              label: {
                show: true,
                color: "#fff",
              },
              itemStyle: {
                normal: {
                  borderColor: "#AEF3FF",
                  borderWidth: 2,
                  areaColor: {
                    image: mapbg,
                    repeat: "repeat",
                  },
                },
              },
              select: {
                label: {
                  color: "#FFFFFF",
                  fontSize: 12,
                  fontWeight: 400,
                },
                // 清除点击选中后的背景色
                itemStyle: {
                  color: null,
                },
              },
              data: [
                { name: "罗湖区", value: this.randomData() },
                { name: "福田区", value: this.randomData() },
                { name: "南山区", value: this.randomData() },
                { name: "龙华区", value: this.randomData() },
                { name: "宝安区", value: this.randomData() },
                { name: "坪山区", value: this.randomData() },
                { name: "龙岗区", value: this.randomData() },
                { name: "城口县", value: this.randomData() },
                { name: "大鹏新区", value: this.randomData() },
                { name: "光明区", value: this.randomData() },
                { name: "盐田区", value: this.randomData() },
              ],
              // 自定义名称映射，json中properties的name如果是英文代号的话，可以使用nameMap和中文名对应起来，如果name是中文的话则不需要nameMap
              // nameMap: {
              //   ckx: "城口县"
              // },
            },
          ],
        };
        myChart.setOption(options);
      }
    },
    randomData() {
      return Math.round(Math.random() * 1000);
    },
    getmap() {
      var chartDom = document.getElementById("main");
      var myChart = window.echarts.init(chartDom);
      var option;
      // $.get(szmap, function (svg) {
      //   // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
      //   window.echarts.registerMap("szmap", { svg: svg });
      //   option = {
      //     tooltip: {},

      //     series: [
      //       {
      //         name: "szmap",
      //         type: "map",
      //         map: "szmap",
      //         roam: true,
      //         emphasis: {
      //           label: {
      //             show: false,
      //           },
      //         },

      //         selectedMode: false,
      //         data: [
      //           { name: "罗湖区", value: 15 },
      //           { name: "宝安区", value: 35 },
      //         ],
      //       },
      //     ],
      //   };
      //   myChart.setOption(option);
      // });
    },
  },
};
</script>
<style lang="scss" scoped></style>
